<template>
  <div>
  <el-card class="box-card" shadow="hover">
    <div slot="header" class="clearfix">
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="员工姓名">
          <el-input v-model="empSearch.ename" placeholder="员工姓名"></el-input>
        </el-form-item>
        <el-form-item label="员工住址">
          <el-input v-model="empSearch.city" placeholder="员工住址"></el-input>
        </el-form-item>
        <el-form-item label="所在部门">
          <el-select v-model="empSearch.did" placeholder="所在部门">
            <el-option label="所有部门" value="0" ></el-option>
            <el-option :label="d.dname" :value="d.did" v-for="d in depts"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search(page,pagesize,empSearch)">搜索</el-button>
          <el-button type="success" plain icon="el-icon-circle-plus" @click="addEmp">添加</el-button>
          <el-button type="danger" plain icon="el-icon-delete" @click="handleDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="emps"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="工号"
        prop="eid"
        width="180">
      </el-table-column>
      <el-table-column
        label="姓名"
        prop="ename"
        width="180">
      </el-table-column>
      <el-table-column
        label="性别"
        prop="sex"
        width="100">
      </el-table-column>
      <el-table-column
        label="住址"
        prop="city"
        width="180">
      </el-table-column>
      <el-table-column
        label="所在部门"
        prop="dname"
        width="180">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>

<!--对话框使用组件引入-->
<add-update v-if="addupdatevisible" ref="addupdate" @reflushEmp="search(page,pagesize,empSearch)"></add-update>
</div>
</template>

<script>

import {search,delet,} from "@/api/emp"
import {findDepts} from "@/api/dept";
import AddUpdate from "@/views/emp/add-update";

export default {
  components: {AddUpdate},
  data() {
    return {
      emps: [],
      page: 1, // 代表当前页
      pagesize: 5,           // 代表每页大小
      total: 100,            // 代表总记录数
      empSearch: {},     // 搜索表单的员工
      depts: [],           // 查询所有部门
      addupdatevisible:false,   //组件的显示隐藏
      multipleSelection: [],      // 代表多选数组，选择的是几行内容
      eids:'',          //代表要删除的员工工号数组
    }
  },
  created() {
    //1. 查询所有员工
    // this.findAllEmps();
    // 2. 分页查询员工
    // this.findByPage(this.page,this.pagesize)
    // 3. 查询所在部门
    this.findDepts()
    //4. 条件查询带搜索
    this.search(this.page, this.pagesize, this.empSearch)
  },
  methods: {
    //1. 编辑员工
    handleEdit(index, row) {
      console.log(index,row)
      this.emp = row,
      this.addupdatevisible=true,
      //调用子组件add-update中的init方法，进行子组件的初始化操作
      this.$nextTick(()=>{
          this.$refs['addupdate'].init(row);})
    },
    //2. 删除员工
    handleDelete(index, row) {
      if(row){
        this.eids = [row.eid]
      }else{
        this.eids = this.multipleSelection.map(m=>m.eid)
      }
      this.$confirm(`是否删除工号为${this.eids}的员工?`, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //2.1 实现在后台进行删除操作
        delet(this.eids).then((data)=>{
          if(data.success){
            let _this = this;
            let page = this.page;
            let pagesize = this.pagesize;
            let empSearch = this.empSearch;
            this.$message({
              type: 'success',
              message: data.message,
              onClose(){
                _this.search(page,pagesize,empSearch)
              }
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //3.页大小改变时触发
    handleSizeChange(val) {
      this.pagesize = val
      this.findByPage(this.page, this.pagesize,this.empSearch);
      console.log(`每页 ${val} 条`);
    },
    //4.当前页改变时触发
    handleCurrentChange(val) {
      this.page = val
      this.search(this.page, this.pagesize,this.empSearch);
      console.log(`当前页: ${val}`);
    },
    //5.查看所有员工
    findAllEmps() {
      findEmps().then((data) => {
        this.emps = data.data.data;
      })
    },
    //6.分页查询
    findByPage(page, pagesize) {
      findByPage(page, pagesize).then(({data}) => {
        //6.1 重新设置总记录数
        this.total = data.bypage.total;
        //6.2 设置每页的集合数据
        this.emps = data.bypage.rows;
      })
    },
    //7. 查询所在部门
    findDepts() {
      findDepts().then(({data}) => {
        this.depts = data.data;
      })
    },
    //8. 条件查询带分页
    search(page, pagesize, empSearch) {
      search(page, pagesize, empSearch).then(({data}) => {
        //8.1 重新设置总记录数
        this.total = data.search1.total;
        //8.2 设置每页的集合数据
        this.emps = data.search1.rows;
      })
    },
    addEmp(){
      this.emp = {};
      this.addupdatevisible=true
      //调用子组件add-update中的init方法，进行子组件的初始化操作
      this.$nextTick(()=>{
        this.$refs['addupdate'].init();
      })
    },
    //多行选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  }
}
</script>

<style scoped>
.box-card{
  margin:15px;
}
.el-pagination{
  text-align: right;
  margin-top: 20px;
}

</style>
